<template>
  <div class="activation-success-page">
    <div class="container">
      <img src="https://lovechronicle.oss-cn-zhangjiakou.aliyuncs.com/book.jpg" alt="网站Logo" class="logo">
      <h1>账户激活成功！</h1>
      <p>感谢您验证邮箱，您的账户现已激活。</p>
      <p>您现在可以登录并开始使用我们的服务了。</p>
      <el-button type="primary" @click="goToLogin">前往登录</el-button>
    </div>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from 'vue-router';
import {ElMessage} from 'element-plus';
import {createUser} from '@/api/user.js';
import {ref} from "vue";

const router = useRouter();
const route = useRoute();
//从链接中获取user
const uuid = route.query.uuid;

console.log("uuid:" + uuid);

const uuidDTO = ref({
  userUUID: ''
})

// 调用用户创建接口
const create = async () => {
  uuidDTO.value.userUUID = uuid;
  console.log("UUID:" + uuidDTO.value.userUUID); // 修正了这里的属性名
  await createUser(uuidDTO.value); // 发送创建用户的请求
  ElMessage.success("账户激活成功！");
};

// 跳转到登录页面
const goToLogin = () => {
  router.push('/'); // 跳转到首页或登录页
};

create()
</script>

<style scoped>
.activation-success-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px; /* 防止内容靠边 */
}

.container {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px; /* 限制容器宽度 */
  width: 100%; /* 在小屏幕上自适应 */
}

.logo {
  width: 80px; /* 调整 LOGO 大小 */
  height: auto;
  margin-bottom: 20px;
}

h1 {
  color: #333;
  font-size: 20px;
  margin-bottom: 10px;
}

p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0;
}

el-button {
  margin-top: 20px;
  width: 100%; /* 占满宽度，方便触控 */
  padding: 10px; /* 增大按钮点击区域 */
  font-size: 16px;
}

/* 针对小屏幕设备的优化 */
@media (max-width: 600px) {
  .container {
    padding: 15px; /* 减少内边距，适应小屏 */
    border-radius: 5px; /* 边框圆角减少 */
  }

  h1 {
    font-size: 18px; /* 缩小标题字体 */
  }

  p {
    font-size: 12px; /* 减小段落文字字体 */
  }
}
</style>
